<template>
  <div class="pageTitle" v-if="titleArray.length>0" ref="pageTitle">
    <sequence></sequence>
    <div class="pageTitlel" ref="pageTitlel">
      <img src="./assets/dot.png" alt="">
      <p class="text" :key="index" v-for="(char, index) in titleArray" :style="{ '--delay': index * 0.1 +0.5+ 's' }">{{
          char
        }}</p>
    </div>
  </div>
</template>

<script>
import {gsap} from 'gsap';
import sequence from './sequence/index.vue'

export default {
  name: "title",
  props: {
    name: {
      type: String,
      default() {
        return '';
      }
    },
  },
  components: {
    sequence,
  },
  computed: {
    titleArray() {
      return this.name.split('');
    }
  },
  mounted() {
    this.animate()
    this.getTitleAnimation()
  },
  methods: {
    getTitleAnimation() {
      const pageTitle = this.$refs.pageTitle;
      const pageTitlel = this.$refs.pageTitlel;

      // Set initial properties
      gsap.set([pageTitle, pageTitlel], {opacity: 0, width: 0});

      // Create a timeline for the animation
      const tl = gsap.timeline();

      tl.to(pageTitle, {width: '100%', opacity: 1, duration: 1, ease: 'power1.inOut'})
        .to(pageTitlel, {width: '50%', opacity: 1, duration: 0.5});
    },
    animate() {
      const titleIcon = this.$refs.titleIconRef;

      // 图标从小到大的动画
      gsap.from(titleIcon, {scale: 0, delay: 0.5, duration: 1});

    }
  },
}
</script>

<style lang="less" scoped>

.pageTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;

  .pageTitlel {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    height: 100%;
    margin-top: 10px;
    margin-left: 90px;
    img{
      width: 11px;
      height: 11px;
      margin-right: 15px;
    }

    .text {
      opacity: 0;
      letter-spacing: 0px;
      transform: translateY(-1em);
      animation: appear 0.5s forwards;
      animation-delay: var(--delay);
      font-size: 24px;
      font-family: AlimamaShuHeiTi;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow:
        0 0 5px #1a80d5,   /* 第一层发光 */
        0 0 10px #1a80d5,  /* 第二层发光 */
        0 0 15px #1a80d5;  /* 第三层发光 */
    }
  }
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
